<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-calendar"></i>结算管理</el-breadcrumb-item>
                <el-breadcrumb-item>代理商结算单查询</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-card class="box-card">
            <el-form :inline="true" ref="form" :model="form" class="demo-form-inline" label-width="100px">
                <el-form-item label="代理商名称">
                    <el-input v-model="form.agentName" placeholder="代理商名称"></el-input>
                </el-form-item>
                <el-form-item label="代理商编号">
                    <el-input v-model="form.agentNo" placeholder="代理商编号"></el-input>
                </el-form-item>
                <el-form-item label="结算月份">
                    <el-date-picker
                      v-model="form.settleMonth"
                      type="month"
                      placeholder="选择月">
                    </el-date-picker>
                </el-form-item>
                <div>
                    <el-form-item label="结算类型">
                        <el-select v-model="form.settleType" placeholder="请选择">
                            <el-option key="" label="全部" value=""></el-option>
                            <el-option key="0" label="冻结" value="0"></el-option>
                            <el-option key="1" label="正常" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-button type="primary" icon="search" @click="onSubmit">查询</el-button>
                    <el-button type="primary" icon="search" @click="exportExcl">导出</el-button>
                </div>
            </el-form>
        </el-card>
        <el-card class="box-card">
            <el-table :data="data" border class="table" ref="multipleTable" :row-class-name="tableRowClassName">
                <el-table-column prop="id" label="序号" align="center" width="150">
                </el-table-column>
                <el-table-column prop="agentNo" label="代理商编号" width="200" align="center">
                </el-table-column>
                <el-table-column prop="agentName" label="代理商名称" width="200" align="center">
                </el-table-column>
                <el-table-column prop="agentIncomeNm" label="入账账户名" width="120" align="center">
                </el-table-column>
                <el-table-column prop="agentBankNm" label="开户银行名" width="200" align="center">
                </el-table-column>
                <el-table-column prop="agentBankNo" label="开户账号" width="200" align="center">
                </el-table-column>
                <el-table-column prop="settleType" label="结算单类型" width="200" align="center">
                </el-table-column>
                <el-table-column prop="settleAmt" label="结算金额(元)" width="200" align="center">
                </el-table-column>
                <el-table-column prop="paidAmt" label="上缴金额(元)" width="200" align="center">
                </el-table-column>
                <el-table-column prop="settleMonth" label="结算月份" width="200" align="center">
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :total="1000">
                </el-pagination>
            </div>
        </el-card>

    </div>
</template>
<script>
    export default {
        name: 'basetable',
        data() {
            return {
              url: './static/vuetable.json',
              tableData: [{
                  id: '1',
                  agentNo: '1',
                  agentName: '湖南省基辅迪世界第三',
                  agentBankNo: '2000',
                  agentBankNm: '123456',
                  agentIncomeNm: '1',
                  settleAmt: 20,
                  paidAmt: 30,
                  settleType: '1',
                  settleMonth:'201812'
                }, {
                  id: '2',
                  agentNo: '1',
                  agentName: '湖南省基辅迪世界第三',
                  agentBankNo: '2000',
                  agentBankNm: '123456',
                  agentIncomeNm: '1',
                  settleAmt: 20,
                  paidAmt: 30,
                  settleType: '1',
                  settleMonth:'201812'
                }, {
                  id: '3',
                  agentNo: '1',
                  agentName: '湖南省基辅迪世界第三',
                  agentBankNo: '2000',
                  agentBankNm: '123456',
                  agentIncomeNm: '1',
                  settleAmt: 20,
                  paidAmt: 30,
                  settleType: '1',
                  settleMonth:'201812'
                }, {
                  id: '4',
                  agentNo: '1',
                  agentName: '湖南省基辅迪世界第三',
                  agentBankNo: '2000',
                  agentBankNm: '123456',
                  agentIncomeNm: '1',
                  settleAmt: 20,
                  paidAmt: 30,
                  settleType: '1',
                  settleMonth:'201812'
                }],
              cur_page: 1,
              is_search: false,
              form: {
                  agentName: '',
                  agentNo:'',
                  settleType:'',
                  settleMonth: '',
              }
            }
        },
        created() {
            // this.getData();
        },
        computed: {
            data() {
                return this.tableData.filter((d) => {
                    let is_del = false;
                    if (!is_del) {
                        return d;
                    }
                })
            }
        },
        methods: {
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            // 分页导航
            handleCurrentChange(val) {
                this.cur_page = val;
                this.getData();
            },
            getData() { // 获取数据
                // 开发环境使用 easy-mock 数据，正式环境使用 json 文件
                if (process.env.NODE_ENV === 'development') {
                    // this.tableData = res.data.list;
                };
            },
            onSubmit() {
                this.is_search = true;
            },
            exportExcl() {

            },
            beforeDate() {

            },
            behindDate() {

            },
            filterTag(value, row) {
                return row.tag === value;
            }
        }
    }

</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
    .table{
        width: 100%;
        font-size: 14px;
    }
    .red{
        color: #ff0000;
    }
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

    .box-card{
      margin-bottom: 10px;
    }

    .el-icon-rank{
      font-size: 40px;
    }

    .amtPosition{
      display: inline-block;
      width: 150px;
    }
</style>
